<template>
    <div class="item-diary">
      <div class="content-list clearfix" :class="{'active':type===8}">
        <div class="img-box clearfix" style="float: left" v-if="data.images.length === 2">
            <div class="content-list-img">
                <img :src="$Url+data.images[0]" alt="">
                <p>before</p>
            </div>
            <div class="content-list-img">
                <img :src="$Url+data.images[1]" alt="">
                <p>after</p>
            </div>
        </div>
        <div class="content-list-text clearfix">
            <h1>
                <span class="title" :style="{'width': type === 1 ? '218px' : '100%'}">{{data.name}}</span>
                <!--<span class="rate" v-if="type === 2">评价<Rate disabled v-model="data.satisfaction" /></span>-->
            </h1>
            <p class="desc" >
                {{data.content}}
                <span @click="open(type,data.id)">查看详情</span>
            </p>
            <div class="content-list-ues" v-if=" type != 2">
                <div class="content-list-uesImg" v-if="type === 1|| type===8">
                   <p>
                       <Icon type="ios-list-box-outline" class="icon"/>
                       {{data.projectgroup}}
                   </p>
                </div>
                <div v-if="type === 6">
                    <p class="share-group">
                        <span class="pink">转载该日记的圈子有：</span>
                        我只是小白、吃不胖怎么办、我想美容法、打败就是我、你是谁我是谁、这个世界不太平..
                    </p>
                </div>
                <div v-if="type === 5">
                    <p class="share-group">
                        <span class="pink">分享该日记的有：</span>
                        我只是小白、吃不胖怎么办、我想美容法、打败就是我、你是谁我是谁、这个世界不太平..
                    </p>
                </div>
                <div v-if="type === 7">
                    <p class="share-group">
                        <span class="pink">投诉该日记的有：</span>
                        我只是小白、吃不胖怎么办、我想美容法、打败就是我、你是谁我是谁、这个世界不太平..
                    </p>
                    <p>该日记被投诉,现处于屏蔽状态，请尽快处理！ <span class="pink float-right" @click="chakan(data.id)">查看原因并处理</span></p>
                </div>
                <div class="content-list-zan" v-if="type === 1 || type === 5 || type === 8">
                    <div class="content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>24564</span></div>
                    <div class="content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>24564</span></div>
                    <div class="content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>24564</span></div>
                    <div class="content-list-icon time" style="width: 112px">{{data.time | formatDate}}</div>
                </div>
            </div>
            <div class="btn-box" v-if="type === 1 || type === 2">
                <span class="btn" @click="bianji(data.id)">编辑</span>
                <span class="btn" @click="delect(data.id)">删除</span>
            </div>
            <div class="btn-box" v-if="type === 3">
                <p style="float: left;line-height: 28px">{{data.time | formatDate}}</p>
                <span class="btn" @click="bianji(data.id)">重新编辑</span>
                <span class="btn"  @click="delect(data.id)">删除</span>
            </div>
            <div class="btn-box" v-if="type === 4 ">
                <p style="float: left;line-height: 28px">{{data.time | formatDate}}</p>
                <span class="btn" @click="reason" :class="{'active':show ===true}">原因</span>
                <span class="btn" @click="bianji(data.id)">重新编辑</span>
                <span class="btn"  @click="delect(data.id)">删除</span>
            </div>
        </div>
        <div class="reason-box" v-if="type === 4 && show ===true">
             <div class="reason">
                 <p> <span class="pink">未通过审核的原因：</span>拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因</p>
                 <p> <span class="pink">再次强调：</span>拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因</p>
                 <p style="text-align: right">{{data.time | formatDate}}</p>
             </div>
         </div>
      </div>
    </div>
</template>

<script>
    /***
     * @type 种类
     * type = 1 日记列表
     * type = 2 草稿箱
     * type = 3 通过审核
     * type = 4 未通过审核
     * type = 5 被分享
     * type = 6 被转载
     * type = 7 被投诉
     *
     */
    export default {
        name: "DiaryItem",
        props: {
          data: {
              type: Object,
          },
            type: {
              type: Number
            }
        },

        data () {
            return {
                show:false,
                date:''
            }
        },
        created () {
            // this.date = this.$formatDate(this.data.time)
        },
        filters:{
            formatDate:function(time){
                var date = new Date(time * 1000);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y+M+D+h+m+s;
            },
        },
        methods :{
            open (type,id) {
              if(type == 5){
                  this.$router.push({path: '/my/mydiary/sharingdelist',query:{id:id}})
              }
            },
            delect (id) {
                this.$emit('del',id)
            },
            reason () {
                this.show=!this.show
            },
            chakan (id) {
                this.$router.push({path: '/my/mydiary/complaindelist',query:{id:id}})
            },
            bianji (id) {
                this.$router.push({path:'/my/mydiary/modify',query:{id:id}})
            }
        }
    }
</script>

<style  lang="less" scoped>
    @import "../../style/style.less";
    .item-diary{
        background-color: #fff;
        padding: 11px 0 0 0;
        .active{
            border-bottom: 1px  dashed  @theme-color-dark;
        }
        .content-list{
            border-bottom: 1px  solid #e4e4e4;
            padding: 21px 0 21px 0;

            .one-img{
                width: 128px;
                height: 150px;
                float: left;
                img{
                    width: 100%;
                    height:100%;
                    border-radius: 5px;
                }
            }
            .content-list-img{
                float: left;
                margin-right: 5px;
                width: 128px;
                height: 128px;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
                p{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    z-index: 1;
                    color: #ffff;
                    text-align: center;
                    height: 22px;
                    line-height: 22px;
                    background-color: rgba(0,0,0,0.4);
                    border-radius: 0 0 5px 5px;
                }
            }
            .content-list-text{
                width: 384px;
                float: left;
                height: 100%;
                margin-left: 15px;
                h1{
                    font-size: 15px;
                    color: #333333;
                    font-weight: normal;
                    padding-bottom: 4px;
                    .title {
                        display: inline-block;
                        width: 218px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .rate{
                        font-size: 12px;
                        float: right;
                        margin-top: -1px;
                    }
                    .ivu-rate-star{
                        margin-right: 0 !important;
                        font-size: 15px;
                    }
                    .ivu-rate{
                        margin-top: -4px;
                    }
                }
                .desc{
                    width: 100%;
                    font-size: 12px;
                    color: #777777;
                    letter-spacing: 0;
                    text-align: justify;
                    padding-bottom:8px;
                    height: 55px;
                    line-height: 1.4;
                    position: relative;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    span{
                        color: @theme-color-dark;
                    }
                }
            }
            .content-list-ues{
                min-height: 30px;
                .content-list-uesImg{
                    width: 100%;
                    .icon{
                       font-size: 18px;
                    }
                    p{
                        width: 100%;
                        font-size: 14px;
                        color: @theme-color-dark;
                        padding-right: 10px;
                        float: left;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                .content-list-zan{
                    height: 30px;
                    .content-list-icon{
                        width: 70px;
                        height: 30px;
                        line-height: 30px;
                        float: left;
                        margin-right: 15px;
                        span{
                            padding-left: 8px;
                            color: #999999;
                        }
                    }
                    .icom{
                        margin-top: -4px;
                    }
                    .icon{
                        color: #999999;
                    }
                    .time{
                        float: right;
                        color: #999999;
                    }
                }
            }
        }
        .btn-box {
            text-align: right;
            .btn {
                display: inline-block;
                color: @theme-color;
                border: 1px solid @theme-color;
                font-size: 14px;
                height: 28px;
                line-height: 28px;
                padding: 0 18px;
                margin-right: 14px;
                border-radius: 4px;
                cursor: pointer;
                position: relative;
            }
            .active {
                &:after {
                    content: '';
                    display: inline-block;
                    border: 1px solid @theme-color;
                    width: 8px;
                    height: 8px;
                    position: absolute;
                    bottom: -10px;
                    left: 28px;
                    background: #fff;
                    border-right-color: transparent;
                    border-bottom-color: transparent;
                    transform:rotate(45deg);
                    -ms-transform:rotate(45deg); 	/* IE 9 */
                    -moz-transform:rotate(45deg); 	/* Firefox */
                    -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
                    -o-transform:rotate(45deg);
                }
            }
        }
        .reason-box {
            padding: 5px 10px 10px;
            float: left;
            width: 100%;
            .reason {
                padding: 10px;
                border: 1px solid @theme-color;
            }
        }
    }
    .content-list:hover{
        border-bottom: 1px  solid #ff82a4;
        background-color: #f8f8f8;
    }
    .content-list:hover .content-list-img p{
        background-color: rgba(255,91,154,0.4);
    }
</style>